<template>
  <div class="footer">
    <el-pagination
      v-model:currentPage="agentPage"
      v-model:page-size="agentPsize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, defineEmits, defineProps, PropType } from "vue"
const props = defineProps({
  pageSizes: {
    type: Array as PropType<number[]>,
    default: () => {
      return [10, 20, 30, 40]
    }
  },
  total: {
    type: Number,
    require: true
  },
  psize: {
    type: Number,
    require: true
  },
  page: {
    type: Number,
    require: true
  }
})
const emits = defineEmits(["psizeChange", "pageChange", "update:psize", "update:page"])

const agentPsize = computed({
  get: () => props.psize,
  set: () => emits("update:psize")
})
const agentPage = computed({
  get: () => props.page,
  set: () => emits("update:page")
})

const handleSizeChange = (val: number) => {
  emits("psizeChange", val)
}
const handleCurrentChange = (val: number) => {
  emits("pageChange", val)
}
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  padding: 10px 10px 10px 0;
}
</style>
